import { View, Text, StyleSheet, FlatList, ViewStyle, useWindowDimensions } from "react-native"
import React, { useEffect, useState } from "react"
import { colors } from "app/theme"
import { SimpleLineIcons } from "@expo/vector-icons"
import { useAppDispatch, useAppSelector } from "app/redux/hooks"
import { getEtheraAccess, unlockEtheraAccess } from "app/redux/actions/getEtheraAccess"
import MainHeader from "app/components/MainHeader"
import { useSafeAreaInsetsStyle } from "app/utils/useSafeAreaInsetsStyle"
import { useFocusEffect } from "@react-navigation/native"
import { resetAccess } from "app/redux/slices/accessSlice"
import LoaderComponent from "app/components/Loader"
import SwipeableButton from "./SwipeButton"
import { scale } from "react-native-size-matters"

const Item = ({ item, onSwipe }) => {
  return (
    <View style={styles.itemContainer}>
      <View>
        <View style={styles.circle}>
          <SimpleLineIcons name="lock" size={20} color={colors.brown} />
        </View>
      </View>
      <View>
        <SwipeableButton onSwipe={() => onSwipe(item)} />
      </View>
    </View>
  )
}

export const Access = () => {
  const { height } = useWindowDimensions()

  const dispatch = useAppDispatch()
  const accessSelector = useAppSelector((state) => state?.access)

  const $bottomContainerInsets = useSafeAreaInsetsStyle(["bottom", "top"])

  const onSwipe = (item) => {
    dispatch(unlockEtheraAccess({ item }))
  }
  useFocusEffect(
    React.useCallback(() => {
      dispatch(getEtheraAccess())
      return () => {
        dispatch(resetAccess())
      }
    }, []),
  )

  return (
    <View style={[$container, $bottomContainerInsets]}>
      <MainHeader />
      <View style={styles.container}>
        {accessSelector?.loading === true ? (
          <View
            style={{
              flex: 1,
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <LoaderComponent />
          </View>
        ) : (
          <FlatList
            data={accessSelector?.accessLocks}
            //@ts-ignore
            renderItem={({ item }) => <Item {...{ item }} onSwipe={onSwipe} />}
            keyExtractor={(item, index) => index.toString()}
            ListEmptyComponent={
              <View style={[styles.emptyComponent, { height: height * 0.7 }]}>
                <Text style={styles.listText}>No records found</Text>
              </View>
            }
          />
        )}
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 44,
    backgroundColor: colors.background,
    paddingHorizontal: 20,
  },
  itemContainer: {
    flexDirection: "row",
    backgroundColor: "white",
    alignItems: "center",
    borderWidth: 1,
    paddingVertical: 10,
    borderRadius: 10,
    marginVertical: 8,
  },
  circle: {
    width: 40,
    height: 40,
    borderRadius: 20,
    borderColor: colors.brown,
    borderWidth: 2,
    marginHorizontal: 20,
    justifyContent: "center",
    alignItems: "center",
  },
  unlockCircle: {
    width: 40,
    height: 40,
    borderRadius: 20,
    borderColor: colors.dullGreen,
    borderWidth: 2,
    marginHorizontal: 20,
    justifyContent: "center",
    alignItems: "center",
  },
  listText: {
    color: colors.black,
    fontSize: scale(18),
    fontWeight: "600",
  },
  emptyComponent: {
    alignItems: "center",
    justifyContent: "center",
    flex: 1,
  },
})

const $container: ViewStyle = {
  flex: 1,
  backgroundColor: colors.background,
}
